<template>
    <div class="register">
        <div class="title">
            <span class="register_title">用户注册</span>
            <span class="register_prompt">请填写以下信息完成注册</span>
        </div>
        <div class="input">
            <van-field class="user_id" @click="activeField = 'username'"
                :class="{ 'active-input': activeField === 'username' }" v-model="username" name="用户名"
                placeholder="请输入手机号码" :rules="[{ required: true, message: '请填写用户名' }]">
                <template #left-icon>
                    <i class="iconfont icon-dianhuahaoma"></i> <!-- 用户图标 -->
                </template>
            </van-field>

            <van-field class="captcha" @click="activeField = 'sms'" :class="{ 'active-input': activeField === 'sms' }"
                v-model="sms" center clearable placeholder="请输入短信验证码">
                <template #left-icon>
                    <i class="iconfont icon-yanzhengma"></i> <!-- 验证码 -->
                </template>
                <template #button>
                    <van-button size="small" type="primary">发送验证码</van-button>
                </template>
            </van-field>

            <van-field class="password" @click="activeField = 'password'"
                :class="{ 'active-input': activeField === 'password' }" v-model="password" type="password" name="密码"
                placeholder="请设置登录密码" :rules="[{ required: true, message: '请填写密码' }]">
                <template #left-icon>
                    <i class="iconfont icon-mima"></i> <!-- 密码锁图标 -->
                </template>
                <template #right-icon>
                    <i class="iconfont" :class="showPassword ? 'icon-biyan' : 'icon-zhengyan'"
                        @click="showPassword = !showPassword"></i>
                </template>
            </van-field>
        </div>
        <div class="select_user_type">
            <div class="select_title">
                <span>技能认证（可多选）</span>
            </div>
            <div class="select_button">
                <van-button @click="toggleSkill('medical')" :class="{ 'active-button': selectedSkills.has('medical') }">
                    <i class="iconfont icon-mianxingyishengtubiao3"></i>
                    <span>医疗</span>
                </van-button>
                <van-button @click="toggleSkill('life')" :class="{ 'active-button': selectedSkills.has('life') }">
                    <i class="iconfont icon-shenghuo"></i>
                    <span>生活指导</span>
                </van-button>
                <van-button @click="toggleSkill('emotion')" :class="{ 'active-button': selectedSkills.has('emotion') }">
                    <i class="iconfont icon-aixinyuanzhupeiban"></i>
                    <span>情感陪伴</span>
                </van-button>
            </div>


        </div>
        <div class="register_button">
            <van-button type="primary">注册</van-button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const activeField = ref('')
const username = ref('')
const sms = ref('')
const password = ref('')
const showPassword = ref(false)
const activeSkill = ref(false) // 控制当前激活的技能类型
const selectedSkills = ref(new Set()) // 改用 Set 提高性能

const toggleSkill = (skill) => {
    const skills = selectedSkills.value
    skills.has(skill) ? skills.delete(skill) : skills.add(skill)
}
</script>

<style lang="less" scoped>
.register {
    width: 100vw;
    height: 100vh;
    background: #FFFFFF;
    padding: 0 2.4rem;
    box-sizing: border-box;

    .title {

        height: 6rem;
        margin-top: 4.8rem;

        .register_title {
            display: block;
            font-family: Roboto, Roboto;
            font-weight: 500;
            font-size: 2.4rem;
            color: #000000;
            line-height: 32px;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }

        .register_prompt {
            display: block;
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 1.4rem;
            color: #6B7280;
            line-height: 2rem;
            text-align: center;
            font-style: normal;
            text-transform: none;
            margin-top: 0.8rem;
        }
    }

    .input {
        width: 100%;
        margin-top: 3.2rem;

        :deep(.van-field) {
            transition: border-color 0.3s ease; // 添加过渡动画

            &.active-input {
                border-bottom: 2px solid #10B981 !important;
            }
        }


        .user_id {
            background: rgba(0, 0, 0, 0);
            border-radius: 2px 2px 2px 2px;
            border-bottom: 1px solid #E5E7EB;
            display: flex;
            align-items: center;
            height: 4.8rem;

            // active-input {
            //     border-bottom: 2px solid #10B981 !important;
            // }

            :deep(.van-field__left-icon) {
                width: 11px;
                height: 14px;
                color: #9CA3AF;
                margin-left: 0.6rem;
                display: flex;
                align-items: center;
                justify-content: center;

            }

            :deep(.van-field__value) {
                flex: 1;
                margin-left: 1.6rem;
            }

            :deep(.van-field__control) {
                width: 100%;
                height: 100%;
                border: none;
                outline: none;
            }
        }

        .captcha {
            background: rgba(0, 0, 0, 0);
            border-radius: 2px 2px 2px 2px;
            border-bottom: 1px solid #E5E7EB;
            display: flex;
            align-items: center;

            height: 4.8rem;
            margin-top: 2.4rem;
            height: 4.8rem;
            margin-top: 2.4rem;

            :deep(.van-field__left-icon) {
                width: 14px;
                height: 14px;
                color: #9CA3AF;
                margin-left: 0.5rem;
                display: flex;
                align-items: center;
                justify-content: center;

            }

            :deep(.van-field__value) {
                flex: 1;
                margin-left: 1.6rem;
            }

            :deep(.van-field__body) {
                display: flex;
            }

            :deep(.van-field__control) {
                flex: 1;
                border: none;
                outline: none;
            }

            .van-button {
                width: 10.2rem;
                height: 3.6rem;
                background: rgba(0, 0, 0, 0);
                border-radius: 0px 0px 0px 0px;
                border: none;

                font-family: Roboto, Roboto;
                font-weight: 400;
                font-size: 14px;
                color: #10B981;
                line-height: 20px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }
        }

        .password {
            background: rgba(0, 0, 0, 0);
            border-radius: 2px 2px 2px 2px;
            border-bottom: 1px solid #E5E7EB;
            display: flex;
            align-items: center;
            height: 4.8rem;
            margin-top: 2.4rem;

            :deep(.van-field__left-icon) {
                width: 1.2rem;
                height: 1.4rem;
                color: #9CA3AF;
                margin-left: 0.6rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            :deep(.van-field__right-icon) {
                width: 1.6rem;
                height: 2.1rem;
                background: rgba(0, 0, 0, 0);
                border-radius: 0px 0px 0px 0px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 1.6rem;
                color: #9CA3AF;
            }

            :deep(.van-field__value) {
                flex: 1;
                margin-left: 1.6rem;
            }

            :deep(.van-field__body) {
                display: flex;
            }

            :deep(.van-field__control) {
                // width: 100%;
                // height: 100%;
                flex: 1;
                border: none;
                outline: none;
            }
        }
    }

    .select_user_type {
        width: 100%;
        margin-top: 2.4rem;

        .select_title {
            span {
                font-family: Roboto, Roboto;
                font-weight: 500;
                font-size: 1.4rem;
                color: #374151;
                line-height: 2rem;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        .select_button {
            display: flex;
            gap: 12px; // 设置元素间距

            margin-top: 1.2rem;

            :deep(.van-button) {
                &.active-button {
                    background: #e7f8f2;
                    color: #10B981;
                    border: 1px solid #39c596;
                }
            }

            .van-button {
                width: 10.1rem;
                height: 8.2rem;
                background: rgba(0, 0, 0, 0);
                border-radius: 4px 4px 4px 4px;
                border: 1px solid #E5E7EB;

                :deep(.van-button__text) {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    span {
                        font-family: Roboto, Roboto;
                        font-weight: 400;
                        font-size: 14px;
                        color: #000000;
                        line-height: 20px;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;

                        margin-top: 1.2rem;
                    }
                }

                .icon-mianxingyishengtubiao3 {
                    width: 18px;
                    height: 20px;
                    color: #10B981;
                }

                .icon-shenghuo {
                    width: 24px;
                    height: 19px;
                    color: #10B981;
                }

                .icon-aixinyuanzhupeiban {
                    width: 20px;
                    height: 17px;
                    color: #10B981;
                }
            }
        }

    }

    .register_button {
        width: 32.7rem;
        height: 4.8rem;
        margin-top: 2.4rem;

        .van-button {
            width: 100%;
            height: 100%;
            background: linear-gradient(270deg, #10B981 0%, #34D399 100%), rgba(0, 0, 0, 0);
            border-radius: 4px 4px 4px 4px;
            border: none;
            font-family: Roboto, Roboto;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 21px;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
    }
}
</style>